<template>
  <div>
      <h1 align="center">消息通知</h1>
      <van-row>
        

        <van-col>
              标题：<input type="text">&emsp;&emsp;  <van-button><van-icon name="search" /> 
              查询 </van-button> &emsp;&emsp;
              <van-button  @click="tianjia" style="width: 100px;background-color: aqua;border: 1px"><van-icon name="replay" /> 重置 </van-button>     <br><br>

             <van-button  @click="dialogVisible = true">+ 增加</van-button> &emsp;
              <van-button><van-icon name="delete-o" /> 删除 </van-button> &emsp;
              <van-button><van-icon name="down" /> 导出 </van-button> &emsp;
              <van-button> <van-icon name="arrow-left" />导入 </van-button> &emsp;
        </van-col>
         <el-dialog v-model="dialogVisible" title="新增通知" width="90%" center>
           <span>
           <van-row>
             <van-col span="12">
              
              <div>
                <el-form>
                  <el-form-item label="标题：" style="padding-left: 30px" v-model="form.title">
                    <el-input placeholder="请输入标题" v-model="form.title" style="width: 400px;"/>
                  </el-form-item>

                  <el-form-item label="开始时间">
                    <el-date-picker v-model="form.stime" type="date" placeholder="请选择时间"  style="width: 400px;" value-format="YYYY-MM-DD">
                    </el-date-picker>

                  </el-form-item>


                  <el-form-item label="优先级" style="padding-left: 15px">
                    <el-select v-model="form.level" placeholder="please select your zone"  style="width: 400px;">
                      <el-option label="低" value="1"></el-option>
                      <el-option label="中" value="2"></el-option>
                      <el-option label="高" value="3"></el-option>
                    </el-select>
                  </el-form-item>
                </el-form>
              </div>
            </van-col>

            <van-col span="12">
              <div style="padding-left: 100px">
                <el-form>
                  <el-form-item label="消息类型">
                    <el-select v-model="form.notice_type" placeholder="please select your zone" style="width: 400px" >
                      <el-option label="系统消息" value="1"></el-option>
                      <el-option label="通知公告" value="2"></el-option>
                     
                    </el-select>
                  </el-form-item>

                  <el-form-item label="结束时间">
                    <el-date-picker v-model="form.ctime" type="date" placeholder="请选择时间" style="width: 400px" value-format="YYYY-MM-DD">
                    </el-date-picker>

                  </el-form-item>


                  <el-form-item label="通告类型">
                    <el-select v-model="form.type" placeholder="please select your zone" style="width: 400px">
                      <el-option label="指定员工" value="1" @click="form.type=='1' ? selectapprover():show2=false"> >
                      </el-option>
                      <el-option label="通知部门" value="2"  @click="form.type=='2' ? selectapprover():show2=false"></el-option>
                      <el-option label="通知所有人" value="3"></el-option>
                    </el-select>
                  </el-form-item>
                </el-form>

              </div>        
            </van-col>
           </van-row>

            <div>
                   内容
                   <Uedit v-model="form.content"/>
            </div>
            </span>
              <template #footer>
                    <span class="dialog-footer">
                        <button >取消</button>
                        <button @click="add">确认</button>
                        
            </span>
             <div>
              <el-dialog v-model="show2">
                      <el-tree
                          ref="tree"
                          :data="data1"
                          show-checkbox
                          default-expand-all
                          node-key="id"
                          highlight-current
                          :props="defaultProps"
                          @check="selectid"
                      />
                      <van-button @click="sureapprover">确认员工</van-button>
                  </el-dialog>
              </div>

                    </template>


       </el-dialog>
       </van-row>
  </div>
</template>

<script>
import axios from "../../http/axios"
import Uedit from "../../components/textmce/TEditor.vue";
export default {
  components: {
          Uedit,
        },
  data(){
    return{
       dialogVisible:false,
       form:{
         title:'',
         content:"",
         type:"",
         notice_type:"",
         level:"",
         stime:"",
         ctime:"",
         },


       data1:[],
      defaultProps: {
        children: 'children',
        label: 'name',
      },
      // 选择审批人
      slist:[],
      // 审批人过滤空值
      slist1:[],
      show2:false,


    }
  },
  methods:{

    sureapprover(){
      let lst=[]
      for(var i=0;i<this.slist.length;i++){
        if(this.slist[i]){
          lst.push(this.slist[i])
        }
      }
      this.slist1=lst
      this.show2=false
    },
    selectid(val){
      this.slist.push(val["rid"])
      console.log(this.slist)
    },
    selectapprover(){
      this.show2=true
      axios("getdept","get").then(res=>{
        this.data1=res.list
        console.log(this.data1)
      })
    },
    add(){
      let data = new FormData()
      if(this.slist1){
        data.append("idlist",JSON.stringify(this.slist1))
      }
      data.append("title",this.form.title)
      data.append("noticetype",this.form.notice_type)
      data.append("stime",this.changetime(this.form.stime))
      data.append("ctime",this.changetime(this.form.ctime))
      data.append("level",this.form.level)
      data.append("type",this.form.type)
      data.append("content",this.form.content)
      axios("Announcement","post",data).then(res=>{
        alert(res.msg)
      })
    }
  },
  
  

 

}
</script>

<style>

</style>